<template>
  <!-- 搜索工作栏 -->
  <div class="header projectResultShow-yunying">
    <div class="search-tools">
      <SearchBar
        v-if="searchConfig"
        ref="formParams"
        :search-config="searchConfig"
        label-width="100px"
        label-position="right"
        :slot-span="4"
        @transferSearchParams="transferSearchParams"
        @search="handleSearch"
        @resetSearch="resetSearch"
      >
        <el-button slot="inner" size="small" type="primary" @click="handleAdd">新建</el-button>
      </SearchBar>
    </div>
    <Table
      ref="tableList"
      class="student-msg-table"
      :table-config="tableConfig"
      :table-data="tableData"
      :total="total"
      :page-no="pageNo"
      :page-size="pageSize"
      @sortChange="sortChange"
      @handleSelectionChange="(val) => { tableSelectList = val }"
      @handleChangePage="handleChangePage"
    >
      <template slot="id" slot-scope="scope">
        <div class="title-box">
          <span>{{ scope.data.index + (pageNo - 1) * pageSize + 1 }}</span>
        </div>
      </template>
      <el-table-column align="center" label="操作" width="280">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            title="确认发布吗？"
            @confirm="handlePush(scope.row)"
          >
            <el-button slot="reference" style="margin: 0 10px" size="mini">发布</el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确认删除吗？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </Table>
    <ViewDetail ref="viewDetail" @handleClose="handleClose" />
    <AuditPop ref="auditPop" />
    <addEditPop ref="addEditPop" @success="getList" />
  </div>
</template>
<script>
import { leftSearchConfig, leftTableConfig } from './initData'
import SearchBar from '@/views/components/SearchBar'
import Table from '@/views/components/Table'
import ViewDetail from './components/viewDetail.vue'
import { getTableList, deleteMsg, getMsgTypeList } from '@/api/inner-msg/index.js'
import AuditPop from './components/auditPop.vue'
import AddEditPop from './components/addEditPop.vue'
import { projectTableList, deleteResult, resultPushApi } from './api'
import { formatDate } from '@/utils/index.js'
export default {
  name: 'NewsList',
  components: {
    SearchBar,
    Table,
    ViewDetail,
    AuditPop,
    AddEditPop
  },
  data() {
    return {
      searchConfig: null,
      tableConfig: leftTableConfig,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableSelectList: [],
      searchParams: {},
      sortingFields: null,
      columnList: []
    }
  },
  mounted() {
    // this.getList()
    this.getTypeList()
  },
  methods: {
    async getTypeList() {
      const { code, data } = await getMsgTypeList({
        pageNo: 1,
        pageSize: 999
      })
      if (code !== 0 || !data || data.list.length === 0) {
        return
      }
      const columnList = data.list.map(v => {
        return {
          label: v.name,
          value: v.id
        }
      })
      const config = JSON.parse(JSON.stringify(leftSearchConfig))
      config.forEach(v => {
        if (v.keyIndex === 'type') {
          v.options = columnList
        }
      })
      this.searchConfig = config
    },
    transferSearchParams(params) {
      this.searchParams = params
      // this.handleSearch();
    },
    resetSearch() {
      this.sortingFields = null
      this.searchParams = {}
      this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
      this.handleSearch()
    },
    handleSearch() {
      this.pageNo = 1
      this.getList()
    },
    async getList() {
      const params = {}
      for (const key in this.searchParams) {
        if (this.searchParams[key] || this.searchParams[key] === 0) {
          params[key] = this.searchParams[key]
        }
      }
      const { code, data } = await projectTableList({
        ...params,
        sortField: this.sortingFields ? this.sortingFields[0] : null,
        status: 0,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })

      if (code === 0) {
        const list = data.list.map(v => {
          return {
            ...v,
            releaseTimeStr: formatDate(v.releaseTime),
            replyTimeStr: formatDate(v.replyTime),
            createTimeStr: formatDate(v.createTime),
            updateTimeStr: formatDate(v.updateTime),
            examineFlagStr: v.examineFlag === 0 ? '否' : v.examineFlag === 1 ? '是' : '',
            examineStatusStr: v.examineStatus === 0 ? '否' : v.examineStatus === 1 ? '是' : ''
          }
        })
        this.tableData = list
        this.total = data.total
      } else {
        this.tableData = []
      }
    },

    // 详情弹窗关闭，再次调接口获取状态
    handleClose() {
      this.getList()
    },

    handleSuccessCall() {
      this.$message.success('操作成功')
      this.tableSelectList = []
      this.getList()
    },

    // 切换页码、页数
    handleChangePage({ pageNo, pageSize }) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getList()
    },

    handleAdd() {
      this.$refs.addEditPop && this.$refs.addEditPop.open({ popType: 'add' })
    },

    // 查看
    handleView(row) {
      this.$refs.viewDetail && this.$refs.viewDetail.open(row.id)
    },

    // 审核 (编辑)
    handleEdit(row) {
      this.$refs.addEditPop && this.$refs.addEditPop.open({ popType: 'edit', row })
    },
    async handlePush(row) {
      const { code, msg } = await resultPushApi({
        id: row.id,
        title: row.title
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.$message.success('发布成功')
      this.getList()
    },
    async handleDelete({ id }) {
      const { code, msg } = await deleteResult({
        id
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.$message.success('删除成功')
      this.getList()
    },

    // 点击排序
    sortChange(sortingFields) {
      const newFields = sortingFields ? sortingFields.map(v => {
        return {
          ...v,
          field: 't.' + v.field
        }
      }) : null
      this.sortingFields = newFields
      this.handleSearch()
    }
  }
}
</script>
<style lang="scss">
    .search-result-table {
        .el-table__cell {
            position: relative;
            padding: 20px 0;
        }
    }

</style>
<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            justify-content: space-between;
        }

        .title-box {
            // position: relative;

            .ranking-icons {
                position: absolute;
                left: 0;
                top: 0;

                .icon-item {
                    color: blue;
                    border: 1px solid blue;
                    margin-right: 3px;
                    padding: 0 2px;
                }
            }
        }
        .btns {
            color: #02A7F0;
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
        }
        .delete {
            color: #f56c6c;
        }
    }
</style>
